<template>
  <div class="register-page">
    <div class="register-card">
      <el-card shadow="hover" class="register-container">
        <div class="card-header">
          <h2 class="register-title">欢迎注册</h2>
        </div>
        <el-form
          :model="form"
          ref="registerForm"
          @submit.prevent="handleRegister"
          class="register-form"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="username" class="input-item">
            <el-input
              v-model="form.username"
              style="width: 100%"
              placeholder="请输入用户名"
              clearable
              class="input-field"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password" class="input-item">
            <el-input
              v-model="form.password"
              style="width: 100%"
              type="password"
              placeholder="请输入密码"
              show-password
              class="input-field"
            />
          </el-form-item>
          <el-form-item label="邮箱" prop="email" class="input-item">
            <el-input
              v-model="form.email"
              style="width: 100%"
              placeholder="请输入邮箱"
              clearable
              class="input-field"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleRegister"
              class="register-btn"
              :loading="loading"
            >
              注册
            </el-button>
            <div class="footer-link">
              <el-link @click="$router.push('/user/login')"
                >已有账号？去登录</el-link
              >
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        email: "",
      },
      loading: false,
    };
  },
  methods: {
    async handleRegister() {
      this.loading = true;
      try {
        const formData = new FormData();
        formData.append("username", this.form.username);
        formData.append("password", this.form.password);
        formData.append("email", this.form.email);
        const response = await this.$axios.post("/register", formData);
        
        if (response.status === 200) {
          this.$message.success("注册成功！请登录。");
          this.$router.push("/user/login");
        }
      } catch (error) {
        const errorMessage =
          error.response?.data?.error || "注册失败，请稍后再试！";
        this.$message.error(errorMessage);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.register-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #f7a8b8, #6a97ff);
  animation: fadeIn 1s ease-in-out;
}

.register-card {
  width: 450px;
  padding: 20px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.5s ease-out;
}

.card-header {
  text-align: center;
}

.register-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  animation: fadeInText 1s ease-out;
}

.register-form {
  display: flex;
  flex-direction: column;
}

.register-form ::v-deep .el-form-item:last-child .el-form-item__content {
  margin-left: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-link {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.input-item {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.input-field {
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.register-btn {
  margin-left: 0px;
  width: 100%;
  background: linear-gradient(135deg, #ff8b8b, #ff56b3);
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 25px;
  padding: 12px;
  transition: all 0.3s ease;
  margin-top: 15px;
}

.register-btn:hover {
  background: linear-gradient(135deg, #ff56b3, #ff8b8b);
  transform: translateY(-2px);
}

.footer-link a {
  color: #555;
  transition: color 0.3s ease;
}

.footer-link a:hover {
  color: #ff56b3;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInText {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
